<template>
  <span>
    <el-switch
      v-if="options.length > 1"
      v-model="modelValue"
      inline-prompt
      :size="size"
      :disabled="inputDisabled"
      :active-text="options[0].value"
      :active-value="options[0].key"
      :inactive-text="options[1].value"
      :inactive-value="options[1].key"
      @change="handleChange"
    ></el-switch>
  </span>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useDisabled } from 'element-plus';

const modelValue = defineModel();
const emit = defineEmits(['change']);
const props = defineProps({
  options: [Array, String],
  placeholder: String,
  size: String
});

const options = ref([]);
const inputDisabled = useDisabled();

const handleChange = () => {
  emit('change');
};

const init = (data) => {
  if (data) {
    if (Array.isArray(data)) {
      options.value = data;
    } else if (typeof data === 'string') {
      const optionList = [];
      data.split(',').forEach(item => {
        optionList.push({key: item, value: item});
      });
      options.value = optionList;
    }
  }
};

watch(() => props.options, (data) => {
  init(data);
}, {immediate: true});
</script>